<template>
    <el-card>
        <div ref="chart" class="chartStyle"></div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import eventBus from '/eventBus';

const chart = ref(null);
const props = defineProps({
    QuestionTypes_with_score_ForProps: {
        type: Object,
        // default: () => []
    }
})

// 监听数据变化
// watch(() => eventBus.state.averageScores, (newScores) => {
//     convertType(newScores);
//     nextTick(() => {
//         initChart();
//     });
// }, { deep: true });

// // 数据转换
// const convertType = (scores) => {
//     xAxisData.value = [];
//     optionData.value = [];
//     for (const score of scores) {
//         xAxisData.value.push(score.question);
//         optionData.value.push(score.avg);
//     }
// }
// 初始化两个空数组
let keysArray = [];
let valuesArray = [];


// 初始化图表
const initChart = () => {
    const myChart = echarts.init(chart.value);
    // console.log("QuestionTypes_with_score_ForProps", props.QuestionTypes_with_score_ForProps);
    for (let key in props["QuestionTypes_with_score_ForProps"]) {
        if (Object.prototype.hasOwnProperty.call(props["QuestionTypes_with_score_ForProps"], key)) {
            keysArray.push(key);
            valuesArray.push(props["QuestionTypes_with_score_ForProps"][key]);
        }
    }
    // console.log("keysArray", keysArray, "valuesArray", valuesArray);
    const option = {
        title: {
            text: '题型分数分布',
            // subtext: 'Fake Data',
            top: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: keysArray
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                data: valuesArray,
                type: 'line'
            }
        ]
    };
    myChart.setOption(option);
};

onMounted(() => {
    nextTick(() => {
        initChart();
    });
});
// onMounted(() => {
//     // 初始化或重置图表
//     if (eventBus.state.averageScores.length) {
//         convertType(eventBus.state.averageScores);
//         nextTick(() => {
//             initChart();
//         });
//     }
// });
</script>

<style lang="scss" scoped>
.chartStyle {
    min-width: 500px;
    // width: 100vw;
    height: 400px;
}
</style>